<template>
    <view class="container">
        <view class="tabs-list">
            <u-tabs
                :list="tabsList"
                :is-scroll="false"
                :current="tabsCurrent"
                :active-color="$setting.colorTheme()"
                @change="tabsChange"
            ></u-tabs>
        </view>
        <view
            v-show="tabsCurrent === 0"
            class="tabs bg-fff"
        >
            <scroll-view
                scroll-x="true"
                style="white-space: nowrap"
            >
                <view class="flex-align-center">
                    <view
                        class="tabs-item flex-column-center"
                        :class="{ 'tabs-item-select': bargainIndex == index }"
                        v-for="(item, index) in bargainList"
                        :key="index"
                        @click="activeTabsChange(index)"
                    >
                        <view>{{ item.title }}</view>
                        <!-- <view>{{item.title}}</view> -->
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="con">
            <view v-show="tabsCurrent === 0">
                <image
                    class="banner"
                    :src="productDetail.file_path"
                    mode="widthFix"
                    @click="showRuleFn"
                ></image>
                <view class="countdown flex-center">
                    <countdown
                        ref="countdown"
                        :config="countdownConfig"
                    ></countdown>
                </view>
                <view class="time"
                    >活动时间：{{ isActive.start_time_text || '' }}至{{
                        isActive.end_time_text || ''
                    }}</view
                >
            </view>
            <view
                v-show="tabsCurrent === 0"
                class="product"
            >
                <view v-if="productList.length">
                    <view
                        class="product-item bg-fff flex"
                        v-for="(item, index) in productList"
                        :key="index"
                    >
                        <image
                            class="product-item-image"
                            :src="item.product.file_path"
                        ></image>
                        <view
                            class="product-item-con flex-column-space-between"
                        >
                            <view class="product-item-name">{{
                                item.product.product_name
                            }}</view>
                            <view
                                class="product-item-stock"
                                :style="{
                                    background:
                                        'url(' +
                                        $setting.imageUrl() +
                                        'seckill_bg_2.png) no-repeat',
                                    backgroundSize: '264rpx 32rpx',
                                }"
                                >还剩{{ item.stock }}件</view
                            >

                            <view
                                class="flex-align-center"
                                :style="{
                                    width: '410rpx',
                                    height: '74rpx',
                                    display: 'flex',
                                    justifyContent: 'space-between',
                                }"
                            >
                                <view class="seckill-activity">
                                    <text class="seckill-activity-ele"
                                        >最低</text
                                    >
                                    <text class="sellMoney_small">
                                        {{ item.bargain_price }}
                                    </text>
                                </view>
                                <b-u-button-theme
                                    v-if="item.stock > 0"
                                    height="50rpx"
                                    @click.stop="bargianImmediately(item)"
                                    >立即助力</b-u-button-theme
                                >
                                <b-u-button-grey
                                    v-else
                                    height="50rpx"
                                    >已售罄</b-u-button-grey
                                >
                            </view>
                        </view>
                    </view>
                </view>
                <u-empty
                    v-else
                    text="当前活动暂无商品"
                    mode="data"
                ></u-empty>
            </view>
            <!-- 我的助力 -->
            <view v-show="tabsCurrent === 1">
                <view v-if="myProductList.length">
                    <view
                        class="product-item bg-fff flex"
                        v-for="(item, index) in myProductList"
                        :key="index"
                        @click="jump(item)"
                    >
                        <view
                            class="cut_icon"
                            :style="{
                                backgroundColor:
                                    item.status === 2 ? '#6b6b6b' : '#e80d0d',
                            }"
                            >{{ statusText[item.status] }}</view
                        >
                        <view style="position: relative">
                            <image
                                class="product-item-image"
                                :src="item.file_path"
                            ></image>
                            <view
                                v-if="item.product_stock == 0"
                                class="aa"
                            >
                                已抢完
                            </view>
                        </view>
                        <view
                            class="product-item-con flex-column-space-between"
                        >
                            <view class="product-item-name"
                                >{{ item.product_name }}
                                <view class="crat-product-sku u-line-1">{{
                                    item.product_attr
                                }}</view>
                            </view>
                            <view v-if="item.status === 0">
                                <u-line-progress
                                    height="16"
                                    class="u-progress"
                                    :percent="item.bargain_rate"
                                    active-color="#e80d0d"
                                    striped-active
                                ></u-line-progress>
                                <view class="product-bargin-price">
                                    已助力<text class="import_text">{{
                                        item.cut_money
                                    }}</text
                                    >元，距离最低还差<text
                                        class="import_text"
                                        >{{ item.surplus_money }}</text
                                    >元
                                </view>
                                <view
                                    v-if="item.conditions === 1"
                                    class="bargain_price"
                                    >助力到{{ item.bargain_price }}可下单</view
                                >
                            </view>
                            <view
                                class="flex-align-center"
                                :style="{
                                    width: '410rpx',
                                    height: '74rpx',
                                    display: 'flex',
                                    justifyContent: 'flex-end',
                                }"
                            >
                                <view v-if="item.product_stock !== 0">
                                    <view
                                        v-if="
                                            item.status === 1 ||
                                            item.conditions === 0
                                        "
                                    >
                                        <b-u-button-theme
                                            v-if="item.is_buy === 0"
                                            width="220rpx"
                                            height="50rpx"
                                            @click.stop="
                                                toBuy(item, 'isMyBargainList')
                                            "
                                        >
                                            立即{{ item.actual_price }}下单
                                        </b-u-button-theme>
                                        <b-u-button-grey
                                            v-else
                                            width="220rpx"
                                            height="50rpx"
                                            >已下单</b-u-button-grey
                                        >
                                    </view>
                                    <b-u-button-theme
                                        v-else
                                        width="220rpx"
                                        height="50rpx"
                                        @click.stop="
                                            jump(item, 'isMyBargainList')
                                        "
                                        >查看助力详情</b-u-button-theme
                                    >
                                </view>
                                <view v-else>
                                    <b-u-button-grey
                                        v-if="item.is_buy === 1"
                                        width="220rpx"
                                        height="50rpx"
                                        >已下单</b-u-button-grey
                                    >
                                    <b-u-button-grey
                                        v-else
                                        width="220rpx"
                                        height="50rpx"
                                        >已抢完</b-u-button-grey
                                    >
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <u-empty
                    v-else
                    text="暂无助力记录"
                    mode="data"
                ></u-empty>
            </view>
        </view>
        <!-- popup数据 -->
        <u-popup
            v-model="sukShow"
            mode="bottom"
            border-radius="24"
            closeable
            close-icon="close-circle"
            close-icon-size="40"
        >
            <view class="popup">
                <view class="popup-product flex">
                    <image
                        class="popup-product-image"
                        :src="
                            curProductDetail.detail.bargainSku[0].productSku
                                .image.file_path ||
                            curProductDetail.detail.product.image[0].file_path
                        "
                        @click="handlePreviewImage(curProductDetail)"
                    ></image>
                    <view class="popup-product-con">
                        <view class="popup-product-name u-line-2">{{
                            curProductDetail.detail.product.product_name
                        }}</view>
                        <view class="popup-product-price"
                            ><text>￥</text
                            >{{ curProductDetail.detail.line_price }}</view
                        >
                    </view>
                </view>

                <view>
                    <view
                        class="popup-sku"
                        v-for="(item, index) in skuMsg"
                        :key="index"
                    >
                        <view class="popup-sku-title">{{
                            item.group_name
                        }}</view>
                        <view class="popup-sku-list flex-wrap">
                            <view
                                class="popup-sku-item"
                                :class="{
                                    'popup-sku-item-select': handleSpecMate(
                                        it.item_id
                                    ),
                                }"
                                v-for="(it, idx) in item.spec_items"
                                :key="idx"
                                @click="handleSelectSpec(index, it.item_id)"
                            >
                                {{ it.spec_value }}</view
                            >
                        </view>
                    </view>
                </view>

                <view class="popup-num flex-space-between">
                    <view class="popup-num-title">购买数量</view>
                    <view class="b-number-box">
                        <u-number-box
                            v-model="product_num"
                            :min="1"
                            disabled-input
                            :long-press="false"
                            :max="1"
                        ></u-number-box>
                    </view>
                </view>
                <b-u-button-theme
                    v-if="isSkuExit > 0"
                    width="100%"
                    height="80rpx"
                    @click.stop="confirmBargain(item, 'isMyBargainList')"
                >
                    确认商品
                </b-u-button-theme>
                <b-u-button-grey
                    v-else
                    width="100%"
                    height="80rpx"
                >
                    已售罄
                </b-u-button-grey>
            </view>
        </u-popup>
        <close-popup
            @onClose="showRule = false"
            :show-pop="showRule"
        >
            <view class="rules">
                <view class="rule-title"> 活动规则 </view>
                <u-parse
                    :html="rules"
                    :tag-style="{ img: 'display:block' }"
                ></u-parse>
            </view>
        </close-popup>
        <!-- <activeRulePopup
            @onClose="showRule = false"
            :show-rule="showRule"
            :rules="rules"
        ></activeRulePopup> -->
    </view>
</template>

<script>
export default {
    data() {
        return {
            showRule: false,
            userInfo: {},
            isActive: {},
            bargainList: [],
            countdownConfig: {
                endstamp: '',
                startstamp: '',
            },
            productList: [],
            productDetail: {},
            myProductList: [],
            statusText: {
                0: '助力中',
                1: '助力成功',
                2: '助力失败',
            },
            bargain_task_id: '',
            product_sku_id: '',
            bargain_product_id: '',
            bargain_activity_id: '',
            productSkuId: {},
            bargainDetail: {},
            curProductDetail: {},
            specList: [],
            tabsCurrent: 0,
            bargainIndex: 0,
            // 当前sku是否有库存
            isSkuExit: false,
            skuIds: '0',
            specInfo: '0',
            skuMsg: [],
            product_num: 1,
            sukShow: false,
            // 用于反查bargainSku
            bargainSkuList: '',
            myProductListParams: {
                page: 1,
                isDone: false,
            },
            tabsList: [
                {
                    id: 'bargainProduct',
                    name: '助力商品',
                },
                {
                    id: 'myBargainProduct',
                    name: '我的助力',
                },
            ],
            share: {
                title: '',
                imageUrl: '',
            },
            rules: '',
            // rules: [
            //     '1.活动期间，邀请平台新注册用户(未登录过酒秒达小程序商城用户)助力，每位新用户仅有一次助力机会，助力达到一定数量后，即可0元购买该活动产品1份！',
            //     '2.活动期间，同一用户完成一笔助力订单后，可再次发起助力链接参与活动！',
            //     '3.新用户助力好友时间界定：新用户通过分享链接登录小程序后须24小时内完成助力好友动作。',
            //     '4.用户完成助力后，若因为超出配送范围或其他个人原因等无法即时下单，则该笔助力订单权益保留10天；超过10天后，该订单恢复原价，用户须重新发起助力订单。',
            //     '5.为保障用户权益，及时联系用户，酒秒达需用户授权个人电话号码，若用户不同意，则无法完成助力活动。',
            //     '6.若发现异常下单行为，酒秒达有权取消即时配送，同时为保障用户账号安全对该账广进行暂时冻结，并保留追究其法律责任的权力。',
            //     '7.参与活动城市：南宁、柳州、金华、河池、太原、平凉（因地区差异，各地活动产品略有不同）',
            // ],
        };
    },
    async onShow() {
        uni.showLoading({
            title: '加载中...',
            mask: true,
        });
        await this.$onLaunched;
        this.myProductListParams.page = 1;
        await this.getHttp();
        uni.hideLoading();
    },
    // 触底请求
    onReachBottom() {
        if (this.tabsCurrent === 1) {
            // 我的助力列表
            this.myProductListParams.page++;
            this.getMyBargainlProduct(1);
        }
    },
    methods: {
        showRuleFn(){
            this.showRule = true
        },
        getUserInfo() {
            uni.$u.api.userInfo().then((res) => {
                this.userInfo = res.userInfo;
            });
        },
        tabsChange(e) {
            this.tabsCurrent = e;
            this.myProductListParams.page = 1;
            if (e == 1) {
                this.getMyBargainlProduct(0);
            } else {
                this.getBargainProduct({
                    bargain_activity_id:
                        this.bargainList[this.bargainIndex].bargain_activity_id,
                });
            }
        },
        activeTabsChange(e) {
            this.bargainIndex = e;
            this.isActive = this.bargainList[e];
            this.getBargainProduct({
                bargain_activity_id: this.bargainList[e].bargain_activity_id,
            });
        },
        async getBargainActive() {
            try {
                const res = await uni.$u.api.getBargainActive();
                if (res.list.length) {
                    this.bargainList = res.list;
                    this.isActive = res.list[this.bargainIndex];
                    // 活动状态(1生效 0未生效)
                    if (this.bargainList[this.bargainIndex].status) {
                        this.bargain_activity_id =
                            this.bargainList[
                                this.bargainIndex
                            ].bargain_activity_id;
                        this.getBargainProduct({
                            bargain_activity_id:
                                this.bargainList[this.bargainIndex]
                                    .bargain_activity_id,
                        });
                        this.getMyBargainlProduct(0);
                    } else {
                        uni.showToast({
                            title: '活动暂未开始',
                        });
                    }
                } else {
                    uni.switchTab({
                        url: '/pages/index/index',
                    });
                    uni.showToast({
                        title: '活动暂未开始',
                    });
                }
            } catch (error) {
                console.log(error);
            }
        },
        async getBargainSetting() {
            try {
                const res = await uni.$u.api.getBargainSetting();
                this.rules = res?.vars?.values?.bargain_rules ?? '';
            } catch (error) {
                console.log(error);
            }
        },
        getConfigDataDetail() {
            let params = {
                page_type: 'bargain',
            };
            uni.$u.api.getConfigDataDetail(params).then((res) => {
                let Detail = res.data;
                this.share.title = Detail.content;
                this.share.imageUrl = Detail.image;
            });
        },
        jump(params, type) {
            const { bargain_product_id, bargain_task_id } = params;
            const url =
                '/pages/active/chopDetail/chopDetail?bargain_product_id=' +
                bargain_product_id +
                '&bargain_task_id=' +
                bargain_task_id;
            uni.navigateTo({
                url: url,
            });
        },
        async getBargainProduct(params) {
            try {
                const res = await uni.$u.api.getBargainProduct({
                    ...params,
                });
                const { list = [], detail = {} } = res;
                this.productList = list;
                this.productDetail = detail;
                this.countdownConfig.endstamp = detail.end_time;
                this.countdownConfig.startstamp = detail.start_time;
            } catch (error) {
                console.log(error);
            }
        },
        // 我的助力列表
        async getMyBargainlProduct(type) {
            try {
                const { list = {} } = await uni.$u.api.getMyBargainlProduct({
                    status: '',
                    page: this.myProductListParams.page,
                });
                // 是否为触底加载,0：不是触底，1：触底加载
                this.myProductList =
                    type === 0
                        ? list?.data ?? []
                        : this.myProductList.concat(list?.data ?? []);
                // length = 0（fasle） / ≠ 0（true）
                this.myProductListParams.isDone = !list?.data ?? []?.length;
            } catch (error) {
                console.log(error);
            }
        },
        toBuy(item) {
            uni.navigateTo({
                url:
                    '/pages/cart/settle/settle?bargain_task_id=' +
                    item.bargain_task_id +
                    '&bargain_product_id=' +
                    item.bargain_product_id +
                    '&bargain_product_sku_id=' +
                    item.bargain_product_sku_id +
                    '&order_type=bargain&product_sku_id=' +
                    item.product_sku_id,
            });
        },
        //
        async confirmBargain() {
            try {
                if (uni.$u.test.isEmpty(this.userInfo.mobile)) {
                    uni.navigateTo({
                        url: '/pages/login/login',
                    });
                    return;
                }
                const res = await uni.$u.api.postBargainTask({
                    bargain_activity_id: this.bargain_activity_id,
                    bargain_product_id: this.bargain_product_id,
                    bargain_product_sku_id: this.bargain_product_sku_id,
                    product_sku_id: this.product_sku_id,
                });
                this.bargain_task_id = res.bargain_task_id;
                this.sukShow = false;
                this.jump(
                    {
                        bargain_product_id: this.bargain_product_id,
                        bargain_task_id: res.bargain_task_id,
                    },
                    ''
                );
            } catch (error) {
                console.log(error);
            }
        },
        // bargianImmediately(item) {},选择商品
        async bargianImmediately(item) {
            // 发起助力（允许发起多次助力）
            try {
                this.bargain_activity_id = item.bargain_activity_id;
                // 先获取当前产品详情才允许助力
                await this.getCurrentBargainDetail(item);
                // 选择商品弹窗
                this.sukShow = true;
            } catch (error) {
                console.log(error);
            }
        },
        async getCurrentBargainDetail(params) {
            try {
                const { bargain_product_id } = params;
                const res = await uni.$u.api.getBargainDetail({
                    bargain_product_id,
                });
                // 发起助力参数的suk
                this.curProductDetail = res;
                this.skuMsg = res.specData?.spec_attr ?? [];
                // 所有product_sku列表
                this.specList = res.detail.bargainSku;
                // 当前所选产品规格 规格1_规格2
                this.skuIds = this.specList[0].productSku.spec_sku_id;
                this.isSkuExit = this.specList[0].bargain_stock;
                // 当前product_sku，包含规格1_规格2，product_sku_id
                this.productSkuId = this.specList[0];
                // 根据product_sku_id反查，bargain_product_sku_id，bargain_product_id
                this.bargainSkuList = this.curProductDetail.detail.bargainSku;
                this.product_sku_id = this.productSkuId.product_sku_id;
                this.bargain_product_id = '';
                this.reverseCheckBargainSkuid();
            } catch (error) {
                console.log(error);
            }
        },
        getHttp() {
            this.getUserInfo();
            this.getBargainActive();
            this.getConfigDataDetail();
            this.getBargainSetting();
        },
        handlePreviewImage(url) {
            uni.previewImage({
                urls: [url],
            });
        },
        // 根据product_sku_id反查，bargain_product_sku_id，bargain_product_id
        reverseCheckBargainSkuid() {
            const i = this.bargainSkuList.find((item) => {
                return item.product_sku_id === this.product_sku_id;
            });
            this.bargain_product_sku_id = i.bargain_product_sku_id;
            this.bargain_product_id = i.bargain_product_id;
        },
        handleSpecMate(id) {
            let back = false;
            let ids = this.skuIds.split('_');
            ids.forEach((item, index) => {
                if (id == item) {
                    back = true;
                }
            });
            return back;
        },
        handleSelectSpec(index, id) {
            let ids = this.skuIds.split('_');
            ids[index] = id;
            this.skuIds = ids.join('_');
            this.specList.forEach((item, index) => {
                if (item.productSku.spec_sku_id == this.skuIds) {
                    this.isSkuExit = item.bargain_stock;
                    this.productSkuId = item;
                    this.product_sku_id = this.productSkuId.product_sku_id;
                    this.reverseCheckBargainSkuid();
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    position: relative;
}
.con {
    padding: 24rpx 24rpx;
    flex: 1;
}
.cut_icon {
    position: absolute;
    top: 0;
    color: #fff;
    border-radius: 0 0 8rpx 8rpx;
    font-size: 20rpx;
    padding: 4rpx 12rpx;
    font-weight: bold;
    z-index: 100;
}
.banner {
    width: 100%;
    height: 272rpx;
    border-radius: 16rpx;
}
.product-item {
    margin-bottom: 24rpx;
    padding: 22rpx;
    border-radius: 16rpx;
    position: relative;
}
.product-item-stock {
    padding-left: 10rpx;
    font-size: 20rpx;
    color: #ffffff;
    width: 264rpx;
    height: 32rpx;
}
.crat-product-sku {
    font-size: 24rpx;
    color: #999999;
    margin-bottom: 12rpx;
}
.product-item-old-price {
    font-size: 24rpx;
    text-decoration: line-through;
    color: #999999;
}
.product-item-price {
    font-size: 32rpx;
    // color: $uni-color-theme;
    color: #e80d0d;
    font-weight: bold;

    text {
        font-size: 24rpx;
    }
    .import_text {
        color: #e80d0d;
    }
}
.product-bargin-price {
    font-size: 22rpx;
    font-weight: bold;
    .import_text {
        color: #e80d0d;
    }
}
.product-item-name {
    font-size: 28rpx;
    color: #111111;
}
.product-item-con {
    margin-left: 20rpx;
    flex: 1;
}
.product-item-image {
    width: 214rpx;
    height: 214rpx;
    border-radius: 16rpx;
}
.tabs {
    z-index: 88;
    width: 100%;
    padding: 22rpx 30rpx;

    .tabs-item {
        display: inline-flex;
        height: 80rpx;
        border-radius: 16rpx;
        font-size: 32rpx;
        color: #666666;
        margin-right: 20rpx;
        padding: 0 20rpx;
        .time-item {
            font-size: 24rpx;
            line-height: 40rpx;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-weight: 500;
        }
    }

    .tabs-item-select {
        background: rgba(232, 13, 13, 0.1);
        color: $uni-color-theme;
    }
}
.tabs-list {
    position: sticky;
    top: 0;
    z-index: 99;
}
.bargain_price {
    color: #e80d0d;
    font-weight: bold;
    margin: 20rpx 0rpx;
}
.popup {
    padding: 40rpx 30rpx;

    .popup-product {
        .popup-product-image {
            width: 176rpx;
            height: 176rpx;
            border-radius: 8rpx;
        }

        .popup-product-con {
            margin-left: 24rpx;
            flex: 1;

            .popup-product-name {
                width: 90%;
                font-size: 28rpx;
                color: #111111;
            }

            .popup-product-price {
                margin-top: 8rpx;
                font-size: 36rpx;
                color: $uni-color-theme;

                text {
                    font-size: 24rpx;
                }
            }
        }
    }

    .popup-sku {
        margin-top: 28rpx;

        .popup-sku-title {
            font-size: 28rpx;
            color: #111111;
        }

        .popup-sku-list {
            margin-top: 28rpx;

            .popup-sku-item {
                background: #e1e1e1;
                border-radius: 16rpx;
                font-size: 28rpx;
                color: #666666;
                padding: 20rpx 26rpx;
                margin: 0 24rpx 24rpx 0;
            }

            .popup-sku-item-select {
                background: $uni-color-theme;
                color: #ffffff;
            }
        }
    }

    .popup-num {
        margin-top: 76rpx;
        padding-bottom: 300rpx;

        .popup-num-title {
            font-size: 28rpx;
            color: #111111;
        }
    }
}

.popup-service {
    .popup-service-title {
        font-size: 36rpx;
        border-bottom: 20rpx solid #f6f6f6;
        text-align: center;
        padding: 34rpx 0;
    }

    .popup-service-list {
        padding: 30rpx;

        .popup-service-list-title {
            font-size: 24rpx;
            color: #111111;
            // text-align: center;
            margin-bottom: 36rpx;
        }

        .popup-service-item {
            margin-bottom: 20rpx;
            border-radius: 16rpx;
            background: #f6f6f6;
            padding: 26rpx 22rpx;

            .popup-service-image {
                width: 36rpx;
                height: 36rpx;
                margin-right: 5rpx;
            }

            .popup-service-name {
                font-size: 28rpx;
                color: #111111;
            }

            .popup-service-describe {
                font-size: 20rpx;
                color: #999999;
                margin-top: 10rpx;
            }
        }
    }
}
.price-box {
    display: flex;
    align-items: flex-end;
}
.time {
    margin: 22rpx 0;
    font-size: 24rpx;
    color: #999999;
    text-align: center;
}
.banner {
    width: 100%;
    height: 272rpx;
    border-radius: 16rpx;
}
.countdown {
    margin-top: 30rpx;
}
.sellMoney_small {
    padding-top: 8rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #b12529;
    line-height: 22rpx;
}
.seckill-activity {
    font-size: 28rpx;
    padding: 0 4rpx;
    margin: 10rpx 0;
    color: #bb0024;
    display: flex;
    align-items: center;
    border-radius: 8rpx;
    border: 1px solid #bb0024;
    display: inline-block;
    width: fit-content;
}
.seckill-activity-ele {
    display: inline-block;
    padding: 0 4rpx;
    background-image: linear-gradient(to right, #bb0024, #fa0032);
    color: #fff;
    margin: 0 10rpx 0 -4rpx;
    border-radius: 7rpx 0 0 7rpx;
}
.aa {
    font-size: 50rpx;
    font-weight: bold;
    position: absolute;
    top: 20%;
    left: 20%;
    color: #e80d0d;
    transform: rotate(-45deg);
}
.rules {
    max-height: 80vh;
    overflow: scroll;
    width: 80vw;
    padding: 20rpx;
    border-radius: 24rpx;
    background-color: #000000;
    opacity: 0.7;
    color: #fff;
}
.rule-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10rpx;
}
.rules-icon {
    position: absolute;
    right: 0;
    top: 30rpx;
    background-color: #00000075;
    color: #fff;
    padding: 6rpx 20rpx;
    font-size: 24rpx;
    border-radius: 24rpx 0 0 24rpx;
}
</style>
